<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>layAdmin后台管理系统模板</title>
    <link rel="stylesheet" href="../../static/layui/css/layui.css">
    <link rel="stylesheet" href="../../static/css/app.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        <style>
        .app-temp{
            width: 20%;
            height: 220px;
            position: relative;
            background-color: #f2f2f2;
            float: left;
            border: 1px solid #f2f2f2;
        }
        .app-head-temp{
            height: 28px;
            width: 100%;
            background-color: #000;
        }
        .app-left-temp{
            position: absolute;
            left: 0;
            top: 0;
            width: 60px;
            height: 100%;
            z-index: 1;
            background-color: #000;
        }
        .logo-text{
            color: #fff;
            font-size: .8rem;
            text-align: center;
        }
        .side-text{
            color: #fff;
            font-size: 0.8rem;
            text-align: center;
            margin: 8px 0;
        }
        .head-text{
            color: #fff;
            font-size: 0.8rem;
            text-align: center;
            line-height: 28px;
        }
        .app-left-temp .app-logo-temp{
            height: 28px;
            line-height: 28px;
            color: #fff;
            text-align: center;
        }
        .tpl-form-item{
            width: 70%;
            float: left;
        }
        .tpl-form-group{
            width: 100%;
            float: left;
            margin-bottom: 15px;
        }
        .tpl-input-item:before,
        .tpl-input-item:after{
            content: ' ';
            display: block;
            clear: both;
        }
        .tpl-form-group .tpl-input-item{
            float: left;
        }
        .tpl-form-group label{
            float: left;
            display: block;
            padding: 9px 15px;
            width: 90px;
            font-weight: 400;
            line-height: 20px;
            text-align: right;
        }
        .tpl-form-group .tpl-input{
            width: 80px;
            height: 36px;
            border: 1px solid #eaeaea;
            padding-left: 10px;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 2px;
            float: left;
            border-right: 0;
        }
    </style>
</head>
<body>
<div class="tpl-app <!--{$Think.session.app_style} .tpl-small-app 为折叠状态-->">
    <!--头部-->
    <!--{include file="public/tpl-head"/}-->
    <div class="tpl-header tpl-left">
        <div class="tpl-header-item">
            <ul class="tpl-head-nav left-item">
                <li class="tpl-head-nav-item">
                    <a href="javascript:;" class="tpl-dent"><i class="layui-icon layui-icon-shrink-right"></i></a>
                </li>
                <li class="tpl-head-nav-item">
                    <a href="javascript:;" target="_blank"><i class="layui-icon layui-icon-website"></i></a>
                </li>
                <li class="tpl-head-nav-item">
                    <a href=""><i class="layui-icon layui-icon-refresh"></i></a>
                </li>
                <li class="tpl-head-nav-item">
                    <input type="text" class="search" placeholder="搜索...">
                </li>
            </ul>
            <ul class="tpl-head-nav right-item">
                <li class="tpl-head-nav-item">
                    <a href="../msg/index.html"><i class="layui-icon layui-icon-notice"></i></a>
                    <span class="tpl-badeg"></span>
                </li>
                <li class="tpl-head-nav-item theme">
                    <a href="javascript:;"><i class="layui-icon layui-icon-theme"></i></a>
                </li>
                <li class="tpl-head-nav-item">
                    <a href="javascript:;" class="screen"><i class="layui-icon layui-icon-screen-full"></i></a>
                </li>
                <li class="tpl-head-nav-item">
                    <a href="javascript:;" class="user-item">新用户-A0001 <i class="fa caret fa-caret-down"></i></a>
                    <ul class="child-nav">
                        <span class="triangle"><em></em></span>
                        <li>
                            <a href="javascript:;"><i class="fa fa-user-o"></i>个人中心</a>
                        </li>
                        <li>
                            <a href="javascript:;"><i class="fa fa-key"></i>修改密码</a>
                        </li>
                        <li>
                            <a href="javascript:;" class="logout"><i class="fa fa-sign-out"></i>退出登陆</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <!--导航栏-->
    <div class="tpl-side">
        <div class="tpl-side-menu">
            <div class="tpl-user-image">
                <span class="user-name">layAdmin</span>
                <a href="javascript:;" class="user-logo"><img src="../../static/images/logo.jpg"></a>
            </div>
            <ul class="tpl-nav">
                <div class="tpl-nav-body">
                    <li class="nav-item">
                        <a href="../../index.html" class="nav-item-link">
                            <i class="layui-icon layui-icon-home nav-icon"></i>
                            <span>主页</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="../auth/index.html" class="nav-item-link">
                            <i class="layui-icon layui-icon-user nav-icon"></i>
                            <span>权限控制台</span>
                            <i class="fa fa-caret-right nav-right-icon"></i>
                        </a>
                        <ul class="child-nav">
                            <li class="child-nav-item">
                                <a href="../auth/auth_add.html">
                                    <i class="fa fa-plus-circle"></i>
                                    <span>添加权限</span>
                                </a>
                            </li>
                            <li class="child-nav-item">
                                <a href="../auth/rule_index.html">
                                    <i class="fa fa-users"></i>
                                    <span>角色组管理</span>
                                </a>
                            </li>
                            <li class="child-nav-item">
                                <a href="../auth/user_index.html">
                                    <i class="fa fa-user-o"></i>
                                    <span>用户管理</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a href="../control/index.html" class="nav-item-link">
                            <i class="layui-icon layui-icon-set nav-icon"></i>
                            <span>设置</span>
                            <i class="fa fa-caret-right nav-right-icon"></i>
                        </a>
                        <ul class="child-nav">
                            <li class="child-nav-item">
                                <a href="../control/index.html">
                                    <i class="fa fa-cogs"></i>
                                    <span>网站设置</span>
                                </a>
                            </li>
                            <li class="child-nav-item">
                                <a href="../control/tdk.html">
                                    <i class="fa fa-edge"></i>
                                    <span>TDK管理</span>
                                </a>
                            </li>
                            <li class="child-nav-item">
                                <a href="../push/push_message.html">
                                    <i class="fa fa-comment-o"></i>
                                    <span>推送消息</span>
                                </a>
                            </li>
                            <li class="child-nav-item">
                                <a href="../mysql/index.html">
                                    <i class="fa fa-table"></i>
                                    <span>数据表管理</span>
                                </a>
                            </li>
                            <li class="child-nav-item">
                                <a href="../control/site_index.html">
                                    <i class="fa fa-theme"></i>
                                    <span>自定义UI管理</span>
                                </a>
                            </li>
                            <li class="child-nav-item">
                                <a href="../email/index.html">
                                    <i class="fa fa-envelope-o"></i>
                                    <span>邮件管理</span>
                                </a>
                            </li>
                            <li class="child-nav-item">
                                <a href="../control/module_index.html">
                                    <i class="fa fa-gear"></i>
                                    <span>模块管理</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a href="../auth/index.html" class="nav-item-link">
                            <i class="layui-icon layui-icon-user nav-icon"></i>
                            <span>用户</span>
                            <i class="fa fa-caret-right nav-right-icon"></i>
                        </a>
                        <ul class="child-nav">
                            <li class="child-nav-item">
                                <a href="../user/login.html">
                                    <i class="fa fa-user-o"></i>
                                    <span>登陆页面</span>
                                </a>
                            </li>
                            <li class="child-nav-item">
                                <a href="../user/register.html">
                                    <i class="fa fa-user"></i>
                                    <span>注册页面</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                </div>
            </ul>
            <ul class="tpl-bottom-nav">
                <li class="tpl-head-nav-item">
                    <a href="javascript:;"><i class="layui-icon layui-icon-notice"></i></a>
                </li>
                <li class="tpl-head-nav-item theme">
                    <a href="javascript:;"><i class="layui-icon layui-icon-theme"></i></a>
                </li>
                <li class="tpl-head-nav-item">
                    <a href="javascript:;"><i class="layui-icon layui-icon-username"></i></a>
                </li>
                <li class="tpl-head-nav-item">
                    <a href="javascript:;"><i class="layui-icon layui-icon-edit"></i></a>
                </li>
            </ul>
        </div>
    </div>
    <div class="tpl-body">
        <div class="tpl-show">
            <div class="tpl-sub-header">
                <!--面包屑-->
                <!--{include file="public/tpl-crumbs"/}-->
                <div class="crumbs">
                    <a href="#">首页</a>
                    <i>/</i>
                </div>
            </div>
            <div class="tpl-fluid">
                <div class="tpl-card">
                    <div class="tpl-card-head">自定义网站UI</div>
                    <div class="tpl-card-body">
                        <div class="app-temp">
                            <div class="app-head-temp"><p class="head-text">示例字体</p></div>
                            <div class="app-left-temp">
                                <div class="app-logo-temp"><span class="logo-text">logo</span></div>
                                <p class="side-text">示例字体</p>
                            </div>
                        </div>
                        <div class="tpl-form-item">
                            <form class="layui-form" id="site-form">
                                <div class="tpl-form-group">
                                    <div class="tpl-input-item">
                                        <label>头部背景</label>
                                        <input type="text" class="tpl-input" name="head-bg">
                                        <div id="head-bg"></div>
                                    </div>
                                    <div class="tpl-input-item">
                                        <label>头部字体颜色</label>
                                        <input type="text" class="tpl-input" name="head-color">
                                        <div id="head-color"></div>
                                    </div>
                                </div>
                                <div class="tpl-form-group">
                                    <div class="tpl-input-item">
                                        <label>logo背景</label>
                                        <input type="text" class="tpl-input" name="logo-bg">
                                        <div id="logo-bg"></div>
                                    </div>
                                    <div class="tpl-input-item">
                                        <label>logo字体颜色</label>
                                        <input type="text" class="tpl-input" name="logo-color">
                                        <div id="logo-color"></div>
                                    </div>
                                </div>
                                <div class="tpl-form-group">
                                    <div class="tpl-input-item">
                                        <label>导航背景</label>
                                        <input type="text" class="tpl-input" name="side-bg">
                                        <div id="side-bg"></div>
                                    </div>
                                    <div class="tpl-input-item">
                                        <label>导航字体颜色</label>
                                        <input type="text" class="tpl-input" name="side-color">
                                        <div id="side-color"></div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block" style="margin-left: 120px;">
                                        <button class="layui-btn layui-btn-sm">保存样式</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--侧边栏-->
    <!--{include file="public/tpl-right-bar"/}-->
    <div class="tpl-right-bar">
        <div class="tpl-right-bar-show">
            <div class="tpl-card">
                <div class="tpl-card-head">配色方案</div>
                <div class="tpl-card-body">
                    <ul class="theme-list">
                        <li class="theme-item" theme-id="1">
                            <div class="theme-head" style="background-color: #ffffff" bg="#ffffff" color="#444444"></div>
                            <div class="theme-side" style="background-color: #20222A" bg="#20222A" color="rgba(255,255,255,.8)">
                                <div class="theme-logo" style="background-color: #20222A" bg="#20222A" color="rgba(255,255,255,.8)"></div>
                            </div>
                        </li>
                        <li class="theme-item" theme-id="2">
                            <div class="theme-head" style="background-color: #ffffff" bg="#ffffff" color="#444444"></div>
                            <div class="theme-side" style="background-color: #50314F" bg="#50314F" color="rgba(255,255,255,.8)">
                                <div class="theme-logo" style="background-color: #50314F" bg="#50314F" color="rgba(255,255,255,.8)"></div>
                            </div>
                        </li>
                        <li class="theme-item" theme-id="3">
                            <div class="theme-head" style="background-color: #ffffff" bg="#ffffff" color="#444"></div>
                            <div class="theme-side" style="background-color: #333f58" bg="#333f58" color="rgba(255,255,255,.8)">
                                <div class="theme-logo" style="background-color: #1E9FFF" bg="#1E9FFF" color="rgba(255,255,255,.8)"></div>
                            </div>
                        </li>
                        <li class="theme-item" theme-id="4">
                            <div class="theme-head" style="background-color: #ffffff" bg="#ffffff" color="#444"></div>
                            <div class="theme-side" style="background-color: #2e9688" bg="#2e9688" color="rgba(255,255,255,.8)">
                                <div class="theme-logo" style="background-color: #2e9688" bg="#2e9688" color="rgba(255,255,255,.8)"></div>
                            </div>
                        </li>
                        <li class="theme-item" theme-id="5">
                            <div class="theme-head" style="background-color: #ffffff" bg="#ffffff" color="#444"></div>
                            <div class="theme-side" style="background-color: #20222a" bg="#20222a" color="rgba(255,255,255,.8)">
                                <div class="theme-logo" style="background-color: #f78400" bg="#f78400" color="rgba(255,255,255,.8)"></div>
                            </div>
                        </li>
                        <li class="theme-item" theme-id="6">
                            <div class="theme-head" style="background-color: #ffffff" bg="#ffffff" color="#444"></div>
                            <div class="theme-side" style="background-color: #242d38" bg="#242d38" color="rgba(255,255,255,.8)">
                                <div class="theme-logo" style="background-color: #AA3130" bg="#AA3130" color="rgba(255,255,255,.8)"></div>
                            </div>
                        </li>
                        <li class="theme-item" theme-id="7">
                            <div class="theme-head" style="background-color: #ffffff" bg="#ffffff" color="#444"></div>
                            <div class="theme-side" style="background-color: #20222a" bg="#20222a" color="rgba(255,255,255,.8)">
                                <div class="theme-logo" style="background-color: #3A3D49" bg="#3A3D49" color="rgba(255,255,255,.8)"></div>
                            </div>
                        </li>
                        <li class="theme-item" theme-id="8">
                            <div class="theme-head" style="background-color: #2F9688" bg="#2F9688" color="#ffffff"></div>
                            <div class="theme-side" style="background-color: #20222a" bg="#20222a" color="rgba(255,255,255,.8)">
                                <div class="theme-logo" style="background-color: #226A62" bg="#226A62" color="rgba(255,255,255,.8)"></div>
                            </div>
                        </li>
                        <li class="theme-item" theme-id="9">
                            <div class="theme-head" style="background-color: #393d49" bg="#393d49" color="#ffffff"></div>
                            <div class="theme-side" style="background-color: #20222a" bg="#20222a" color="rgba(255,255,255,.8)">
                                <div class="theme-logo" style="background-color: #20222a" bg="#20222a" color="rgba(255,255,255,.8)"></div>
                            </div>
                        </li>
                        <li class="theme-item" theme-id="10">
                            <div class="theme-head" style="background-color: #ffffff" bg="#ffffff" color="#4f4f4f"></div>
                            <div class="theme-side" style="background-color: #ad5fcf" bg="#ad5fcf" color="rgba(255,255,255,.8)">
                                <div class="theme-logo" style="background-color: #20222A" bg="#20222A" color="rgba(255,255,255,.8)"></div>
                            </div>
                        </li>
                        <li class="theme-item" theme-id="11">
                            <div class="theme-head" style="background-color: #ffffff" bg="#ffffff" color="#444"></div>
                            <div class="theme-side" style="background-color: #20222A" bg="#20222A" color="#b91a1a">
                                <div class="theme-logo" style="background-color: #20222A" bg="#20222A" color="#b91a1a"></div>
                            </div>
                        </li>
                        <li class="theme-item" theme-id="12">
                            <div class="theme-head" style="background-color: #ffffff" bg="#ffffff" color="#444"></div>
                            <div class="theme-side" style="background-color: #0a5541" bg="#0a5541" color="#eda438">
                                <div class="theme-logo" style="background-color: #20222A" bg="#20222A" color="rgba(255,255,255,.8)"></div>
                            </div>
                        </li>
                        <li class="theme-item" theme-id="13">
                            <div class="theme-head" style="background-color: #ffffff" bg="#ffffff" color="#626262"></div>
                            <div class="theme-side" style="background-color: #f44336" bg="#f44336" color="#fbfbfb">
                                <div class="theme-logo" style="background-color: #f44336" bg="#f44336" color="#fbfbfb"></div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../../static/layui/layui.js"></script>
<script src="../../static/js/app.js"></script>
<script>
    layui.use(['jquery','table','colorpicker'],function() {
        var $ = layui.jquery;
        var colorpicker = layui.colorpicker;
        colorpicker.render({
            elem: '#head-bg'
            ,color: '#000000'
            ,done: function(color){
                $("input[name='head-bg']").val(color);
                $('.app-head-temp').css('background',color);
            }
        });
        colorpicker.render({
            elem: '#head-color'
            ,color: '#000000'
            ,done: function(color){
                $("input[name='head-color']").val(color);
                $('.head-text').css('color',color)
            }
        });
        colorpicker.render({
            elem: '#logo-bg'
            ,color: '#000000'
            ,done: function(color){
                $("input[name='logo-bg']").val(color);
                $('.app-logo-temp').css('background',color)
            }
        });
        colorpicker.render({
            elem: '#logo-color'
            ,color: '#000000'
            ,done: function(color){
                $("input[name='logo-color']").val(color);
                $('.logo-text').css('color',color);
            }
        });
        colorpicker.render({
            elem: '#side-bg'
            ,color: '#000000'
            ,done: function(color){
                $("input[name='side-bg']").val(color);
                $('.app-left-temp').css('background',color)
            }
        });
        colorpicker.render({
            elem: '#side-color'
            ,color: '#000000'
            ,done: function(color){
                $("input[name='side-color']").val(color);
                $('.side-text').css('color',color)
            }
        });
        $("#site-form").submit(function (e) {
            e.preventDefault();
            let head_bg = $("input[name='head-bg']").val();
            let head_color = $("input[name='head-color']").val();
            let logo_bg = $("input[name='logo-bg']").val();
            let logo_color= $("input[name='logo-color']").val();
            let side_bg = $("input[name='side-bg']").val();
            let side_color = $("input[name='side-color']").val();
            if (head_bg == '') head_bg = '#ffffff';
            if (head_color == '') head_color = '#444';
            if (logo_bg == '') logo_bg = '#20222A';
            if (logo_color == '') logo_color = 'rgba(255,255,255,.8)';
            if (side_bg == '') side_bg = '#20222A';
            if (side_color == '') side_color = 'rgba(255,255,255,.8)';
            $.ajax({
                url: window.location.href,
                type: 'post',
                data: {
                    head_bg: head_bg,
                    head_color: head_color,
                    logo_bg: logo_bg,
                    logo_color: logo_color,
                    side_bg: side_bg,
                    side_color: side_color
                },
                success: function (d) {
                    layer.msg(d.msg);
                }
            })
            return false;
        })
    })
</script>
</body>
</html>